<template>
	<sl-page title="门店信息">
		<!-- 表单组件 -->
		<view class="bankCards">
			<view class="s-form">
				<view class="s-form__item">
					<view class="s-form__item--label flex-basis-30">门店名称</view>
					<view class="s-form__item--control">
						<input class="form-item--input" type="text" v-model="form.name" maxlength="30"
							placeholder="请输入门店名称" />
					</view>
				</view>
				<view class="s-form__item">
					<view class="s-form__item--label flex-basis-30">名店地址</view>
					<view class="s-form__item--control">
						<input class="form-item--input" type="text" v-model="form.address" maxlength="30"
							placeholder="请输入名店地址" />
					</view>
				</view>
			</view>
		</view>
		<view class="action btn-primary" :class="{'disable': !verifyPassed}" @click.stop="onSubmit()">保存
		</view>
	</sl-page>
</template>

<script>
	import * as Verify from '@/utils/verify';
	import StoreApi from '@/api/store/store.js';
	import Constants from '@/constants';

	export default {
		//
		name: 'updateStore',
		//
		mixins: [Constants],
		//
		components: {},

		//
		data() {
			return {
				form: {
					name: '',
					address: '',
				},

				verifyPassed_name: false,
				verifyPassed_address: false,
			};
		},
		//
		watch: {
			'form.bankName': function() {
				this.verifyPassed_name = this.VerifyName();
			},
			'form.bankAccount': function() {
				this.verifyPassed_address = this.VerifyAddress();
			},
		},
		//
		computed: {
			verifyPassed: function() {
				return this.verifyPassed_name && this.verifyPassed_address;
			}
		},
		onLoad({
			storeId
		}) {
			if (storeId) {
				this.form.id = storeId;
				this.load();
			}
		},
		//
		methods: {
			load: function() {
				const app = this;
				StoreApi.get(app.form.id).then(result => {
					const detail = result.obj;
					app.createFormData(detail);
				});
			},
			createFormData(detail) {
				const {
					form
				} = this;
				form.id = detail.id;
				form.name = detail.name;
				form.address = detail.address;
			},
			//
			VerifyName: function() {
				return !Verify.isEmpty(this.form.name);
			},
			VerifyAddress: function() {
				return !Verify.isEmpty(this.form.address);
			},
			//
			onSubmit() {
				if (!this.VerifyName()) {
					this.$app.toast('请输入门店名称')
					return;
				}
				if (!this.VerifyAddress()) {
					this.$app.toast('请输入门店地址')
					return;
				}
				this.doSubmit();
			},
			//
			doSubmit() {
				StoreApi.save(this.form).then((res) => {
					this.$app.toast('修改成功');
					this.onBackPage();
				});
			},
			//
			onBackPage: function() {
				this.$app.redirectTo(this.pages.indexStorePage);
			}
		}
	};
</script>

<style lang="scss" scoped>

</style>